<template>
	<div class="booknew">
		<h3>
			<i class="icon">&#xe8d1;</i>新书上市<i class="icon">&#xe8d1;</i>
		</h3>
		<div class="list">
			<ul class="ullist">
				<li class="bookli" v-for="(item,i) in booklist" :key="item.id">
					<router-link :to="`/pc/booksdeta?&book_id=${item.id}`">
						<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
						<h4>{{item.name}}</h4>
						<p>
							<strong>{{item.maker}}</strong>
							<span>{{item.author}}</span>
							<span>{{item.info}}</span>
						</p>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'PCNewBook',
		data() {
			return {
				booklist: [],
			}
		},
		methods: {
			getBook() {
				this.$get("/api/public/findPageBook/1/12/0").then((res) => {
					this.booklist = res.data.data.books;
					console.log(this.booklist);
				})
			}
		},
		mounted() {
			this.getBook();
		}
	}
</script>

<style scoped>
	.booknew {  
	  width: 100%;  
	  background-color: #d9deff;  
	  padding-bottom: 15px;  
	}  
	  
	.booknew h3 {  
	  margin: 0;  
	  height: 50px;  
	  text-align: center;  
	  line-height: 50px;  
	  color: white;  
	}  
	  
	.booknew h3 i {  
	  padding: 0 20px;  
	}  
	  
	.booknew .ullist {  
	  display: flex;  
	  flex-wrap: wrap; /* 允许换行 */  
	  justify-content: center; /* 项目对齐方式 */  
	  align-items: stretch; /* 项目垂直对齐方式 */  
	  padding: 0;  
	  list-style: none;  
	  margin: 0 -10px; /* 修正外边距，用于间隙 */  
	}  
	  
	.booknew .ullist .bookli {  
	  flex: 0 0 15%; /* 每个项目占据一行宽度的20% */  
	  padding: 5px;  
	  display: flex;
	  justify-content: center;
	  background-color: white;  
	  border-radius: 10px;  
	  margin: 0 10px 20px; /* 上下margin用来实现换行间隙 */  
	  box-sizing: border-box; /* 包括padding和border在内的宽度 */  
	  text-align: center;  
	  overflow: hidden; /* 防止内容溢出 */  
	  align-items: center;
	}  
	  
	.booknew .ullist .bookli:nth-child(5n) { /* 每行的最后一个项目 */  
	  margin-right: 0; /* 移除最后一个项目的右边距 */  
	}  
	  
	.booknew .ullist .bookli img {  
	  width: 100%; /* 宽度设置为100%，自适应容器 */  
	  height: auto; /* 高度自适应，保持图片比例 */  
	  display: block; /* 作为块级元素显示 */  
	  padding-top: 15px;  
	}  
	  
	.booknew .ullist .bookli a {  
	  display: block;  
	  width: 100%;  
	  text-decoration: none;  
	  text-align: center;  
	}  
	  
	.booknew .ullist .bookli h4 {  
	  font-size: 14px;  
	  color: #8b8ea3;  
	  margin: 10px 0; /* 调整上下外边距 */  
	}  
	  
	/* 如果需要，添加更多的样式来确保内容不会溢出 */  
	.booknew .ullist .bookli p {  
	  margin: 0; /* 移除默认的段落外边距 */  
	  padding: 0 5px; /* 根据需要添加内边距 */  
	}  
	  
	.booknew .ullist .bookli strong,  
	.booknew .ullist .bookli span {  
	  display: block; /* 如果需要，可以将文本内容显示为块级元素来避免溢出 */  
	  margin-bottom: 5px; /* 添加适当的下边距 */  
	 max-width: 20em;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	} 
</style>